<template>
  <div class="placeholder-div">
    <div class="side-nav-bar-style">
      <!-- 导航栏LOGO -->
      <div
        class="logo-div-style"
        @click="changeNavigationLocation"
      >
        <img :src="require('@/assets/images/jjxt/index/system-logo-sh.png')">
      </div>
      <!-- 导航栏LOGO -->

      <el-menu
        :default-active="activeItem"
        class="el-menu-vertical-demo"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <div
          v-for="(item, index) in sideNavBarItem"
          :key="`a${index}`"
        >
          <el-menu-item
            v-if="!item.children"
            :index="item.value"
            @click="changeSideNavigationBar(item.value)"
          >
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
          <el-submenu
            v-else
            :index="item.value"
          >
            <template slot="title">
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group
              v-for="(innerItem, innerIndex) in item.children"
              :key="`b${innerIndex}`"
            >
              <el-menu-item :index="innerItem.value">{{ innerItem.name }}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </div>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 选中的导航栏项
      activeItem: '',

      // 侧边导航栏项
      sideNavBarItem: [
        { name: '首页', value: '0' },
        { name: '组织机构',
          value: '1',
          children: [
            { name: '子目录01', value: '9' },
            { name: '子目录02', value: '10' }
          ]
        },
        { name: '规章制度', value: '2' },
        { name: '安全生产', value: '3' },
        { name: '应急指挥', value: '4' },
        { name: '检测监测', value: '5' },
        { name: '综合管理', value: '6' },
        { name: '供电数据中心', value: '7' },
        { name: '系统链接', value: '8' }
      ]
    };
  },
  watch: {
    // 根据路由判断当前选中导航栏项
    $route(to) {
      switch (to.path) {
        case '/welcome':
          this.activeItem = '0';
          break;
        case '/ywzt':
          this.activeItem = '8';
          break;
      }
    }
  },
  methods: {
    // 更改所选菜单栏
    changeSideNavigationBar(value) {
      switch (value) {
        case '0':
          if (this.$router.history.current.path !== '/welcome') {
            this.$router.push('/welcome');
          }
          break;
        case '8':
          if (this.$router.history.current.path !== '/ywzt') {
            this.$router.push('/ywzt');
          }
          break;
      }
    },

    // 切换导航栏位置（暂时）
    changeNavigationLocation() {
      this.$store.dispatch('settings/changeSetting', {
        key: 'navigationLocation',
        value: 'top'
      });
      const navigationLocation = this.$store.state.settings.navigationLocation;
      if (navigationLocation === 'left') {
        this.$store.commit('pageZoom', document.body.clientWidth / (1920 + 332));
      } else {
        this.$store.commit('pageZoom', document.body.clientWidth / 1920);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-menu {
  border: none;
  background-color: transparent;
}

::v-deep .el-menu-item {
  font-size: 22px;
}

::v-deep .el-menu-item.is-active {
  color: white !important;
  background-color: #0082CD;
}

::v-deep .el-menu-item:hover {
  color: white !important;
  background-color: #0082CD;
}

::v-deep .el-submenu__title {
  font-size: 22px;
}

::v-deep .el-submenu__title:hover {
  color: white !important;
  background-color: #0082CD;
}

.placeholder-div {
  width: 332px;
  height: 100%;
  .side-nav-bar-style {
    width: 332px;
    height: 100%;
    background-color: rgba($color: #081b4d, $alpha: 0.66);
    z-index: 2;
    .logo-div-style {
      height: 68px;
      color: white;
      padding: 0 36px 0 36px;
      width: auto;
      align-items: center;
      display: flex;
      cursor: pointer;
    }
  }
}
</style>
